<template>
	<view class="pagesbg">
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入交易密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 图片查看弹窗 -->
		<uni-popup ref="imgBoxPopup" type="center" :animation="true" @change="changePopup($event,'imgBoxPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="imgBoxPopup">
						<image class="ico" :src="imgShow(showUrl)" mode="widthFix" />
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 头部 -->
		<view class="header-bg"></view>
		<view class="header_bar header_fixed" :class="heightTop > 20 ? 'header_bg' : ''">
			<view class="header">
				<view class="header-goWhiteBack" @tap.stop="$tools.back(1)"></view>
				<view class="header-title--white">确认订单</view>
			</view> 
		</view> 
		
		<view class="orderWays">
			<view class="orderWays-wrapper">
				<view class="orderWays-box" @tap.stop="checkWays()">
					<image class="img" v-if="userAddressList.length != 0" src="../../static/public/addr-1.png" mode=""></image>
					<view class="news" v-if="userAddressList.length == 0">
						<view class="addr"> <image class="img" src="../../static/public/addr-d.png" mode=""></image>添加地址</view>
					</view>
					<view class="news" v-else>
						<view class="addr">
							{{ address.address  }}
						</view>
						<view class="data">
							<view class="info">{{ address.consignee }}</view>
							<view class="info">{{ address.phone }}</view>
						</view>
					</view>
					<image class="next" src="@/static/public/icon-next-back.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="goods">
			<view class="goods-list">
				<view class="goods-list__item" :class="{'goods-list__item--mb' : goodsDetail.length > 1}"
				v-for="(item,index) in goodsDetail" :key="index">
					<view class="imgBox">
						<image :src="imgShow(item.productInfo.image)" mode=""></image>
					</view>
					<view class="content">
						<view class="name">{{ item.productInfo.storeName }}</view>
						<view class="norms">
							<view class="norms-title">规格：{{ item.productInfo.attrInfo.sku }}</view>
						</view>
						<view class="giveIntegralBox" v-if="Number(item.giveFuel) > 0">
							<view class="giveIntegral">赠送{{ (item.giveFuel) }}消费券</view>
						</view>
						<view class="giveIntegralBox" v-if="Number(item.giveIntegral) > 0">
							<view class="giveIntegral">赠送{{ (item.giveIntegral) }}积分</view>
						</view>
						<view class="operateBox">
							<view class="price">
								<image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" /> {{ item.price }}
							</view>
							<view class="operateBox-box" v-if="Number(isNew) == 1">
								<image class="ico" @tap="redece(item)" v-if="Number(item.cartNum) == 1" src="@/static/public/reduce.png" mode=""></image>
								<image @tap="redece(item)" v-else src="@/static/public/reduce-black.png" mode=""></image>
								<input type="number" :value="item.cartNum" maxlength="999" disabled="disabled">
								<image class="ico" @tap="add(item)" src="@/static/public/add.png" mode=""></image>
							</view>
							<view class="operateBox-box" v-else>
								<input type="text" :value="'×'+item.cartNum" maxlength="999" disabled="disabled">
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg">
			<view class="buyWaysList">
				<view class="buyWaysList-list">
					<view class="buyWaysList-list__item">
						<view class="left">
							<view class="title">商品金额</view>
						</view>
						<view class="right">
							<view class="price"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ goodsTotal }}</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="Number(totalPostage) > 0">
						<view class="left">
							<view class="title">运费</view>
						</view>
						<view class="right">
							<view class="price"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" />{{ totalPostage }}</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="Number(totalGiveFuel) > 0">
						<view class="left">
							<view class="title">赠送总消费券</view>
						</view>
						<view class="right">
							<view class="price">{{ totalGiveFuel }}</view>
						</view>
					</view>
					<view class="buyWaysList-list__item" v-if="Number(totalGiveIntegral) > 0">
						<view class="left">
							<view class="title">赠送总积分</view>
						</view>
						<view class="right">
							<view class="price">{{ totalGiveIntegral }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="contentBoxBg" style="padding: 32rpx 20rpx;">
			<view class="buyWaysList">
				<view class="buyWaysList-headerTitle">支付方式</view>
				<!-- <view class="buyWaysList-list">
						<view class="buyWaysList-list__item" @tap.stop="checkActive(1)">
							<view class="left">
								<image src="@/static/index/index-icon1.png" mode=""></image>
								<view class="tips">积分卷（{{ userMoney.validNum1 ? userMoney.validNum1 : 0 }}）</view>
							</view>
							<view class="check">
								<image :src="waysActive == 1 ? '../../static/public/check-active.png' : '../../static/public/check.png'" mode=""></image>
							</view>
						</view>
				</view> -->
				<view class="panyMentBox">
					<view class="tab-list">
						<view class="tab-item" v-for="(item,index) in typeList" :key="index">
							<view class="tab-title" :class="[currIndex == index? 'tab-title--active' : ''] " @tap.stop="changeTypeList(index,item)">{{ item.name }}</view>
						</view>
					</view>
					<view class="panyMentBox-item" v-if="payType==1">
						<view class="group">
							<view class="group-item">
								<view class="label">账户名：</view>
								<view class="title">{{payWeixin.cardNo}}
									<image class="copy" @tap.stop="$tools.copy(payWeixin.cardNo)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
						</view>
						<view class="img" @tap.stop="viewImg(payWeixin.receiptImage)">
							<image class="" :src="imgShow(payWeixin.receiptImage)" mode="widthFix" /> 
						</view>
						<view class="p">点击查看大图</view>
					</view>
					<view class="panyMentBox-item" v-if="payType==2">
						<view class="group">
							<view class="group-item">
								<view class="label">账户名：</view>
								<view class="title">{{payAlipay.cardNo}}
									<image class="copy" @tap.stop="$tools.copy(payAlipay.cardNo)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
						</view>
						<view class="img" @tap.stop="viewImg(payAlipay.receiptImage)">
							<image class="" :src="imgShow(payAlipay.receiptImage)" mode="widthFix" /> 
						</view>
						<view class="p">点击查看大图</view>
					</view>
					<view class="panyMentBox-item" v-if="payType==3">
						<view class="group">
							<view class="group-item">
								<view class="label">账户名：</view>
								<view class="title">{{payCard.cardNo}}
									<image class="copy" @tap.stop="$tools.copy(payCard.cardNo)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
							<view class="group-item">
								<view class="label">所属银行：</view>
								<view class="title">{{payCard.receiptName}}
									<image class="copy" @tap.stop="$tools.copy(payCard.receiptName)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
							<view class="group-item">
								<view class="label">所属支行：</view>
								<view class="title">{{payCard.branchBank}}
									<image class="copy" @tap.stop="$tools.copy(payCard.branchBank)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
							<view class="group-item">
								<view class="label">银行卡号：</view>
								<view class="title">{{payCard.receiptImage}}
									<image class="copy" @tap.stop="$tools.copy(payCard.receiptImage)" src="@/static/public/copy.png" mode="widthFix" />
								</view>
							</view>
						</view>
					</view>
					<view class="panyMentBox-content">
						<!-- <input type="num" :placeholder="'请输入支付金额'" class="input" placeholder-class="inputStyle" v-model="payNum" /> -->
						<view class="warn">
							<image class="ico" src="@/static/public/ico-warn.png" mode="widthFix" /> 	已转账，需上传支付凭证（最多3张）
						</view>
						<view class="unload-box">
							<u-upload :fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								:multiple="false"
								:maxCount="3"
								type="image/png, image/jpeg, image/gif"
								:previewFullImage="true">
							<image src="@/static/public/addImg.png" mode="widthFix" style="width: 168rpx;height: 168rpx;"></image>
						</u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="confirmBottom">
			<view class="confirmBottom-left">
				<view class="title">合计
					<view class="active"><image class="ico" src="@/static/index/index-icon1.png" mode="widthFix" /> {{ commonTotal }}</view>
				</view>
			</view>
			<view class="confirmBottom-right">
				<view class="btn" v-if="orderNo == ''" @tap.stop="$u.throttle(addOrder,1000)">立即提交</view>
				<view class="btn" v-else @tap.stop="$u.throttle(addPay,1000)">立即付款</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import url from '@/common/js/url.js';

	export default {
		components:{
		},
		data(){
			return{
				heightTop: 0,
				waysActive: 1,
				goodsDetail:{},
				isNew: 1,
				address: {},
				userAddressList: [],
				addressId: '',
				address_id: '',
				password: '',
				orderId: '',
				userInfo: {},
				userMoney: {},
				idsList: [],
				orderNo: '',
				// 线下支付
				currIndex:0,
				payType:1,
				payNum:'',
				typeList:[
					{name: '微信',status:1},
					{name: '支付宝',status:2},
					{name: '银行卡',status:3},
				],
				code_pic: [],
				fileList1: [],
				showUrl:'',
				payWeixin:'',
				payAlipay:'',
				payCard:'',
			}
		},
		computed:{
			// 商品总价
			goodsTotal(){
				let that = this;
				// for(let i=0;i<this.goodsDetail.length;i++){
				// 	console.log(this.goodsDetail[i].price,this.goodsDetail[i].cartNum)
				// 	sum += (this.goodsDetail[i].price * this.goodsDetail[i].cartNum);
				// }
				// return that.toFloor(sum);
				let sum = 0;
				this.goodsDetail.map(item => {
					// if(Number(item.stock) > 0){
						return sum += Number(item.cartNum * item.price)
					// }
				})
					return sum.toFixed(2)
			},
			// 总邮费
			totalPostage(){
				let that = this;
				var sum = 0;
				for(let i=0;i<that.goodsDetail.length;i++){
					sum += (that.goodsDetail[i].postage);
				}
				return that.toFloor(sum);
			},
			// 总积分卷
			totalGiveIntegral(){
				let that = this;
				var sum = 0;
				for(let i=0;i<that.goodsDetail.length;i++){
					sum += (that.goodsDetail[i].giveIntegral * this.goodsDetail[i].cartNum);
				}
				return that.toFloor(sum);
			},
			// 总消费券
			totalGiveFuel(){
				let that = this;
				var sum = 0;
				for(let i=0;i<that.goodsDetail.length;i++){
					sum += (that.goodsDetail[i].giveFuel * this.goodsDetail[i].cartNum);
				}
				return that.toFloor(sum);
			},
			// 共计
			commonTotal(){
				return this.toFloor(this.jia(this.goodsTotal,this.totalPostage));
			},
		},
		onPageScroll(e) {
			this.heightTop = e.scrollTop;
		},
		onLoad(options) {
			this.init();
			if(options.value1){
				this.goodsDetail = JSON.parse(decodeURIComponent(options.value1));
			}
			if(options.value2){
				this.isNew = options.value2;
			}
			if(options.value3){
				this.idsList = JSON.parse(decodeURIComponent(options.value3));
			}
			console.log("goodsDetail：",this.goodsDetail);
			console.log("idsList：",this.idsList);
			if(this.address != null){
				this.addressId = this.address.id;
			}
		},
		onShow() {
			this.init();
			this.address_id = uni.getStorageSync('address_id');
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getAddrList();
				this.getUserMoney();
				this.payMethodConfig()
			},
			checkWays(){
				this.$tools.jump('/pages/address/address',1);
			},
			// 支付订单
			addOrder(){
				if(this.userInfo.isPayPwd == '1'){
					return this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd');
				}
				if(!this.addressId || this.addressId == undefined || this.addressId == null){
					return this.$tools.toast('请选择或者绑定收货地址');
				}
				if(this.code_pic.length==0){
					return this.$tools.toast('请上传支付凭证');
				}
				// if(this.waysActive == 0){
				// 	return this.$tools.toast('请选择支付方式');
				// }
				// if(this.waysActive == 1 || this.waysActive == 2){
				// 	return this.$tools.noOpen();
				// }
				var data = {};
				// 1 直接购买  0 购物车购买
				if(this.isNew == 1){
					data['productId'] = this.goodsDetail[0].productId;
					data['cartNum'] = this.goodsDetail[0].cartNum;
					data['productAttrUnique'] = this.goodsDetail[0].codeUnique;
					data['isNew'] = this.isNew;
				}else{
					data['isNew'] = '0';
					data['cartIds'] = (this.idsList).toString();
				}
				console.log("data:",data);
				// return;
				this.$Ajax('/api/order/add',data, res => {
						this.orderNo = res.data.orderKey;
						this.openPopup('psdPopup');
						// if(this.waysActive == 1|| this.waysActive == 2){
						// 	this.openPopup('psdPopup');
						// }else{
						// 	// this.$tools.noOpen();
						// 	// this.onlinePay();
						// }
					}, err => {
					}
				);
			},
			addPay(){
				// if(this.waysActive == 1 || this.waysActive == 2){
				// 	this.openPopup('psdPopup');
				// }else{
				// 	// this.$tools.noOpen();
				// 	// this.onlinePay();
				// }
				this.openPopup('psdPopup');
			},
			onlinePay(){
				var data = {
					"addressId": this.addressId,
					"orderKey": this.orderNo,
					"payType": this.waysActive,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/order/create',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.msg,'/pages/order/order','');
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						if(err.code == 300){
							this.$tools.toastBack(err.msg,1);
						}
						uni.hideLoading();
					}
				)
			},
			psdSubmit(){
				if (this.password == '' ) {
					return this.$tools.toast('请输入交易密码');
				}
				var data = {
					"addressId": this.addressId,
					"orderKey": this.orderNo,
					"payPwd": this.$md5(this.password),
					"payType": this.payType,
					"verifyCode": this.code_pic.join(','),
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/order/create',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.msg,'/pages/order/order','');
							this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						console.log("err：",err);
						if(err.code == 300){
							this.$tools.toastBack(err.msg,1);
						}
						// if(err.errorCode == 1014){
						// 	this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd',1);
						// }
						uni.hideLoading();
					}
				)
			},
			checkActive(index){
				if(this.waysActive != index){
					this.waysActive = index;
				}
			},
			// 查询地址列表
			getAddrList(){
				var data = {
					pageIndex:1,
					pageSize:1000,
				};
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/address/getUserAddress',
				data,
				res => {
						this.pages = res.data.pages;
						this.userAddressList = this.userAddressList.concat(res.data.list);
						this.userAddressList.forEach((item,index) =>{
							// console.log(this.address_id == '' || this.address_id == undefined || this.address_id == null)
							if(this.address_id == '' || this.address_id == undefined || this.address_id == null){
								if(item.remark == '1'){
									this.address = item;
									this.addressId = item.id;
								}else{
									if(index == 0){
										this.address = item;
										this.addressId = item.id;
									}
								}
							}else{
								if(this.address_id == item.id){
									this.address = item;
									this.addressId = item.id;
								}else{
									if(index == 0){
										this.address = item;
										this.addressId = item.id;
									}
								}
							}
						})
						// console.log("this.address:",this.address);
						uni.hideLoading();
					}, err => {
						uni.hideLoading();
					}
				)
			},
			redece(item){
				if(item.cartNum > 1){
					item.cartNum --;
				}else{
					item.cartNum = 1;
				}
			},
			add(item){
				item.cartNum ++;
			},
			// 线下支付
			offlinePay(){
				var data = {
					"verifyCode": this.code_pic.join(','),
					"orderNo": this.orderId,
					"payType": this.payType,
				};
				console.log("data：",data);
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/order/payOrder',
				data,
				res => {
						if(res.code == 200){
							this.$tools.toastJump(res.msg,'/pages/order/order','');
							// this.hidePopup('psdPopup');
							uni.hideLoading();
						}
					},err => {
						if(err.code == 300){
							// this.$tools.toastBack(err.msg,1);
						}
						uni.hideLoading();
					}
				)
			},
			// 获取收款方式
			payMethodConfig(){
				var data = {
				};
				uni.showLoading({
					mask:true
				})
				this.$Ajax('/api/money/payMethodConfig',
				data,
				res => {
						// console.log("this.address:",this.address);
						uni.hideLoading();
						if(res.data.length>0){
							const index =res.data.findIndex(item=>item.payMethod==1)
							const index1 =res.data.findIndex(item=>item.payMethod==2)
							const index2 =res.data.findIndex(item=>item.payMethod==3)
							if(index>-1){
								this.payWeixin = res.data[index]
							}
							if(index1>-1){
								this.payAlipay = res.data[index1]
							}
							if(index2>-1){
								this.payCard = res.data[index2]
							}
							console.log(this.payWeixin,this.payAlipay,this.payCard )
						}

					}, err => {
						uni.hideLoading();
					}
				,'GET')
			},
			// 查看大图片
			viewImg(url){
				this.showUrl=url
				console.log(this.showUrl)
				this.openPopup('imgBoxPopup');
			},
			// 切换支付方式
			changeTypeList(index,item){
				if(this.currIndex !=index){
					this.currIndex = index
					this.payType = item.status
				}
			},
			// 删除图片 (封面图)
			deletePic(event) {
				// console.log(event);
				// console.log('fileList',this.fileList);
				this[`fileList${event.name}`].splice(event.index, 1);
				this.code_pic.splice(event.index, 1);
				console.log('code_pic',this.code_pic)
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// console.log(event);
				const name = event.file.name
				const arr = name.split('.')
				const type= arr[arr.length-1]
				// console.log('type',type);
				if(!(type=='jpg' || type=='png' || type=='jpeg')){
					return this.$tools.toast('请上传jpg,png,jpeg图片格式');
				}
				uni.showLoading({
				    title: "上传中",
				    mask: true
				});
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = that[`fileList${event.name}`].length
				lists.map((item) => {
					that[`fileList${event.name}`].push({
						...item,
					})
				})
				
				let now_time = new Date().getTime();
				uni.uploadFile({
					url: url.webUrl+'/api/common/upload',
					filePath: lists[0].url,
					name: 'file',
					formData: {
						// 'key': now_time,
					},
					success: (uploadFileRes) => {
						let uploadImgUrl = JSON.parse(uploadFileRes.data).data;
						console.log("uploadImgUrl:",uploadImgUrl);
						// this.code_pic = uploadImgUrl.url;
						// this.code_pic = uploadImgUrl.fileName;
						this.code_pic.push(uploadImgUrl.fileName);
						console.log('code_pic',this.code_pic)
						uni.hideLoading();
					},
					fail: (error) => {
						console.log(error);
						uni.hideLoading();
					},
					complete: () => {
						setTimeout(function() {
							uni.hideLoading();
						}, 250);
					},
				});
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pagesbg{
		padding-bottom: 200rpx;
	}
	.header-bg{
		background: url('@/static/user/orderDetail-top.png') no-repeat;
		background-size: 100% 100%;
		height: 220rpx
	}
	.orderWays{
		padding-top: 0 !important;
		margin-top: -40px;
		margin-bottom: 12rpx;
		&-wrapper{
			margin: 12rpx 20rpx 0;
			position: relative;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
		&-box{
			background: #FFFFFF;
			border-radius: 20rpx;
			@include flexLeft;
			width: 100%;
			padding: 38rpx 0 38rpx 20rpx;
			position: relative;
			z-index: 2;
			.img{
				width: 48rpx;
				height: 48rpx;
				display: inline-block;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			.news{
				@include flexLeftColumn;
				margin: 0 36rpx 0 20rpx;
				width: calc(100% - 48rpx - 56rpx - 24rpx);
				.addr{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333;
					word-break: break-all;
				}
				.tips{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
				.data{
					@include flexLeft;
					margin-top: 16rpx;
					.info{
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}
			}
			.next{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
	.goods{
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 20rpx 20rpx 28rpx;
		margin: 0 20rpx;
		&-list{
			@include flexLeftColumn;
			&__item{
				@include flexLeft;
				width: 100%;
				&--mb{
					margin-bottom: 26rpx;
				}
				.imgBox{
					background: #EDEDED;
					width: 180rpx;
					height: 180rpx;
					margin-right: 28rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.content{
					@include flexLeftColumn;
					width: calc(100% - 208rpx);
					.name{
						margin-bottom: 10rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #000;
						word-break: break-all;
						@include initMoreLine(2);
					}
					.norms{
						@include flexLeftColumn;
						// margin: 22rpx 0 34rpx;
						margin-bottom: 10rpx;
						&-title{
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #666;
						}
						&-ways{
							background: #131414;
							border-radius: 8rpx;
							@include flexCenter;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							padding: 6rpx 14rpx;
						}
						image{
							width: 24rpx;
							height: 20rpx;
							margin-left: 16rpx;
							transform: rotate(90deg)
						}
					}
					.giveIntegralBox{
						margin-bottom: 10rpx;
						font-size: 24rpx;
						color: #F15D39;
						// padding: 6rpx 14rpx;
					}
					.operateBox{
						@include flexBetween;
						width: 100%;
						.price{
							font-family: DIN, DIN;
							font-weight: 700;
							font-size: 34rpx;
							color: #F15D39;
							@include flexLeft;
							.ico{
								width: 48rpx;
							}
							.unit{
								font-size: 24rpx;
							}
						}
						.ico{
							width: 48rpx;
						}
						&-box{
							@include flexRight;
							.ico{
								height: 48rpx;
								line-height: 48rpx;
								background: #F5F5F5;
							}
							image{
								width: 40rpx;
								height: 40rpx;
							}
							input{
								font-family: PingFangSC-Semibold, PingFangSC-Semibold;
								font-weight: 400;
								font-size: 26rpx;
								color: #333;
								height: 48rpx;
								line-height: 48rpx;
								background: #F5F5F5;
								margin: 0 8rpx;
								width: 76rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}
	}
	
	.contentBoxBg{
		border-radius: 16rpx;
		margin: 10rpx 20rpx;
		.buyWaysList-list__item .right .price{
			font-size: 28rpx;
			color: #FA6A45;
			font-weight: bold;
			background:linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
		.unit{
			font-size: 22rpx;
		}
		.ico{
				width: 48rpx;
				display: inline-block;
				vertical-align: middle;
			}
	}
	
	.confirmBottom{
		position: fixed;
		bottom: 0;
		width: 100vw;
		background: #ffffff;
		padding: 16rpx 22rpx 68rpx 32rpx;
		z-index: 99;
		@include flexBetween;
		&-left{
			@include flexLeft;
			.title{
				font-family: PingFangSC-Medium, PingFangSC-Medium;
				font-weight: 400;
				font-size: 28rpx;
				color: #333;
				@include flexLeft;
				.active{
					font-family: PingFangSC-Medium, PingFangSC-Medium;
					font-weight: 400;
					font-size: 28rpx;
					color: #FA6A45;
					// &::before{
					// 	content: '￥';
					// 	font-family: PingFang SC, PingFang SC;
					// 	font-weight: 400;
					// 	font-size: 28rpx;
					// 	color: #F4010A;
					// 	margin-top: 8rpx;
					// }
				}
			}
		}
		&-right{
			@include flexRight;
			.price{
					font-family: PingFangSC-Medium, PingFangSC-Medium;
					font-weight: 400;
					font-size: 28rpx;
					color: #FA6A45;
			}
			.btn{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				padding: 14rpx 58rpx;
				background: linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}
		}
		.unit{
			font-size: 22rpx;
		}
		.ico{
				width: 48rpx;
				display: inline-block;
				vertical-align: middle;
			}
	}

	// 购买方式
	.panyMentBox{
		background: #F2F3F4;
		border-radius: 20rpx;
		padding-bottom: 20rpx;
		.tab{
			&-list{
				@include flexBetween;
				width: 100%;
				border-bottom: 1px solid #D8D8D8;
				padding: 0 78rpx;
			}
			&-item{
				// width: 33.3%;
				text-align: center;
				// height: 72rpx;
				// line-height: 72rpx;
				font-size: 28rpx;
				overflow: hidden;
			}
			&-title{
				color: #878787;
				padding: 32rpx 20rpx;
				&--active{
					font-weight: 500;
					font-size: 32rpx;
					color: #3B3B3B;
					position: relative;
				}
				&--active::before{
					content: '';
					width: 80%;
					height: 4px;
					background: linear-gradient(180deg, #FA6A45 0%, #F94123 100%);
					border-radius: 18px;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
		&-item{
			padding: 0 20rpx;
			.img{
				margin: auto;
				margin-top: 30rpx;
				width: 224rpx;
				height: 224rpx;
				background: #fff;
				border-radius: 10rpx;
				overflow: hidden;
				image{
					width: 100%;
				}
			}
			.p{
					margin-top: 16rpx;
					text-align: center;
					font-size: 24rpx;
					color: #787878;
					line-height: 50rpx;
				}
			.group{
				background: #fff;
				border-radius: 20rpx;
				padding: 32rpx 20rpx;
				margin-top: 20rpx;
				&-item{
					@include flexBetween;
					font-size: 28rpx;
					margin-top: 24rpx;
					.title{
						color: #333;
						max-width: calc(100% - 160rpx);
						word-break: break-all;
					}
					.price{
						font-size: 28rpx;
						font-weight: bold;
						color: #FA6A45;
						background:linear-gradient( 180deg, #FA6A45 0%, #F94123 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						@include flexLeft;
					}
					.ico{
						width: 48rpx;
					}
					.copy{
						width: 24rpx;
						display: inline-block;
					}
					.label{
						color: rgba(51, 51, 51, 0.8);
					}
					.unit{
						font-size: 22rpx;
					}
				}
				.ico{
					width: 40rpx;
					height: 40rpx;
					display: inline-block;
					vertical-align: middle;
					margin-left: 10rpx;
				}
				&-item:nth-child(1){
					margin-top:0;
				}
			}
		}
		&-content{
			padding: 0 20rpx;
			.input{
				margin-top: 14rpx;
				background: #fff;
				height: 80rpx;
				padding: 20rpx;

			}
			.warn{
				margin-top: 26rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				line-height: 26rpx;
			}
			.ico{
				width: 30rpx;
				display: inline-block;
				vertical-align: middle;
				margin-right: 10rpx;
			}
			.unload{
				&-box{
					margin-top: 34rpx;
				}
			}
		}
	}
	
	
</style>